<!DOCTYPE html>
<html>
<head>
    <title>验证码测试页面</title>
    <script src="https://cdn.tailwindcss.com"></script>
    <link href="https://cdn.jsdelivr.net/npm/font-awesome@4.7.0/css/font-awesome.min.css" rel="stylesheet">
    <script>
        tailwind.config = {
            theme: {
                extend: {
                    colors: {
                        primary: '#3B82F6',
                        secondary: '#10B981',
                        accent: '#F59E0B',
                    },
                    fontFamily: {
                        sans: ['Inter', 'system-ui', 'sans-serif'],
                    },
                }
            }
        }
    </script>
    <style type="text/tailwindcss">
        @layer utilities {
            .content-auto {
                content-visibility: auto;
            }
            .captcha-container {
                position: relative;
                overflow: hidden;
                border-radius: 0.5rem;
                box-shadow: 0 4px 6px -1px rgba(0, 0, 0, 0.1);
            }
            .captcha-refresh {
                position: absolute;
                inset: 0;
                background-color: rgba(0, 0, 0, 0.5);
                opacity: 0;
                transition: opacity 0.3s ease;
                display: flex;
                align-items: center;
                justify-content: center;
                cursor: pointer;
            }
            .captcha-container:hover .captcha-refresh {
                opacity: 1;
            }
            .input-focus {
                @apply focus:ring-2 focus:ring-primary/50 focus:border-primary;
            }
        }
    </style>
</head>
<body class="bg-gray-50 min-h-screen flex items-center justify-center p-4">
    <div class="max-w-md w-full bg-white rounded-xl shadow-lg overflow-hidden">
        <div class="p-6">
            <h2 class="text-2xl font-bold text-gray-800 mb-6 text-center">验证码测试</h2>
            
            <form id="verifyForm" class="space-y-5">
                <div>
                    <label for="captcha" class="block text-sm font-medium text-gray-700 mb-1">验证码</label>
                    <div class="flex items-center space-x-3">
                        <input type="text" id="captcha" name="captcha" placeholder="请输入图片中的字符" 
                            class="flex-1 px-4 py-2 border border-gray-300 rounded-lg input-focus" required>
                        
                        <div class="captcha-container w-32 h-12">
                            <img id="captchaImg" src="" alt="验证码图片" class="w-full h-full object-cover">
                            <div class="captcha-refresh" id="refreshBtn">
                                <i class="fa fa-refresh text-white text-xl"></i>
                            </div>
                        </div>
                    </div>
                    <p id="errorMsg" class="mt-1 text-sm text-red-500 hidden">验证码错误，请重试</p>
                </div>
                
                <button type="submit" class="w-full bg-primary hover:bg-primary/90 text-white font-medium py-2.5 px-4 rounded-lg transition-all duration-300 transform hover:scale-[1.02] focus:outline-none focus:ring-2 focus:ring-primary/50">
                    验证
                </button>
            </form>
            
            <div id="result" class="mt-6 p-4 bg-gray-50 rounded-lg hidden">
                <h3 class="font-medium text-gray-800 mb-2">验证结果</h3>
                <p id="resultMsg" class="text-gray-600"></p>
            </div>
        </div>
    </div>

    <script>
        let sessionId = null;
        
        // 初始化页面
        document.addEventListener('DOMContentLoaded', () => {
            fetchCaptcha();
            
            // 点击刷新按钮
            document.getElementById('refreshBtn').addEventListener('click', fetchCaptcha);
            
            // 表单提交
            document.getElementById('verifyForm').addEventListener('submit', async (e) => {
                e.preventDefault();
                verifyCaptcha();
            });
        });
        
        // 获取验证码
        async function fetchCaptcha() {
            const captchaImg = document.getElementById('captchaImg');
            const timestamp = new Date().getTime();
            
            // 显示加载状态
            captchaImg.src = '';
            captchaImg.classList.add('opacity-50');
            
            try {
                const response = await fetch(`127.0.0.0:8000/accounts/captcha/?t=${timestamp}`, {
                    headers: sessionId ? { 'X-Session-ID': sessionId } : {}
                });
                
                // 更新 sessionId
                if (response.headers.get('X-Session-ID')) {
                    sessionId = response.headers.get('X-Session-ID');
                }
                
                // 加载图片
                const blob = await response.blob();
                const imageUrl = URL.createObjectURL(blob);
                captchaImg.src = imageUrl;
                captchaImg.classList.remove('opacity-50');
                
                // 重置错误消息
                document.getElementById('errorMsg').classList.add('hidden');
                document.getElementById('result').classList.add('hidden');
            } catch (error) {
                console.error('获取验证码失败:', error);
                alert('获取验证码失败，请重试');
            }
        }
        
        // 验证验证码
        async function verifyCaptcha() {
            const captchaInput = document.getElementById('captcha').value.trim();
            if (!captchaInput) {
                document.getElementById('errorMsg').textContent = '请输入验证码';
                document.getElementById('errorMsg').classList.remove('hidden');
                return;
            }
            
            try {
                const response = await fetch('27.0.0.0:8000/accounts/verify_captcha/', {
                    method: 'POST',
                    headers: {
                        'Content-Type': 'application/json',
                        'X-Session-ID': sessionId
                    },
                    body: JSON.stringify({ captcha: captchaInput })
                });
                
                const data = await response.json();
                const resultDiv = document.getElementById('result');
                const resultMsg = document.getElementById('resultMsg');
                
                resultDiv.classList.remove('hidden');
                if (data.valid) {
                    resultMsg.textContent = '验证成功！验证码正确。';
                    resultMsg.classList.remove('text-red-500');
                    resultMsg.classList.add('text-green-600');
                } else {
                    resultMsg.textContent = '验证失败！验证码错误。';
                    resultMsg.classList.remove('text-green-600');
                    resultMsg.classList.add('text-red-500');
                    
                    // 刷新验证码
                    fetchCaptcha();
                }
            } catch (error) {
                console.error('验证请求失败:', error);
                alert('验证请求失败，请重试');
            }
        }
    </script>
</body>
</html>